<!--  -->
<template>
  <div class="repetory-list">
    <!-- 面包屑到导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存管理</el-breadcrumb-item>
      <el-breadcrumb-item>库存订单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-box">
      <el-input v-model="searchTxt" placeholder="搜索订单内容" clearable>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchContent"
        ></el-button>
      </el-input>
    </div>
    <div class="table-box">
      <el-table
        border
        :data="tableData"
        :default-sort="{ prop: 'date', order: 'descending' }"
        style="width: 100%"
      >
        <el-table-column prop="skuNo" label="商品编号" sortable align="center">
        </el-table-column>
        <el-table-column
          prop="skuName"
          label="商品名称"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="saleCount"
          label="销售数量"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="inventory"
          label="库存剩余"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editComOrder(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="dialogbox">
      <el-dialog
        title="提示"
        :visible.sync="editDialogVisible"
        width="30%"
        :before-close="editHandleClose"
      >
        <div class="editFormbox">
          <el-form
            :model="editOrderForm"
            :rules="editOrderRules"
            ref="editOrderFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="库存数量" prop="inventory">
              <el-input v-model="editOrderForm.inventory"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateInventory">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      searchTxt: '',
      tableData: [],
      editDialogVisible: false,
      // 编辑订单form
      editOrderForm: {},
      editOrderRules: {
        inventory: [
          { required: true, message: '库存不能为空', trigger: 'blur' },
        ],
      },
      queryInfo: { query: '', curPage: 1, pagesSize: 10 },
      total: 0,
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 监听页面pagesize改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesSize = newSize
      this.getStockInfoList()
    },
    // 监听页码值的改变
    handleCurrentChange(newPage) {
      this.queryInfo.curPage = newPage
      this.getStockInfoList()
    },
    // 编辑dialog关闭事件
    editHandleClose() {
      this.editDialogVisible = !this.editDialogVisible
    },
    // 编辑dialog打开
    editComOrder(orderInfo) {
      console.log(orderInfo)
      this.editOrderForm = orderInfo
      this.editDialogVisible = !this.editDialogVisible
    },
    getStockInfoList() {
      return this.$http({
        url: this.$http.adornUrl('/mall/stockinfo/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.queryInfo.curPage,
          limit: this.queryInfo.pagesSize,
          name: this.queryInfo.query,
        }),
      }).then(({ data }) => {
        console.log(data)
        if (data && data.code === 0) {
          this.tableData = data.page.list
          this.total = data.page.totalCount
        } else {
          this.tableData = []
        }
      })
    },
    // 查找事件
    searchContent() {
      let skuNo = this.searchTxt
      if (skuNo) {
        return this.$http({
          url: this.$http.adornUrl(`/mall/stockinfo/info/${skuNo}`),
          method: 'get',
        }).then(({ data }) => {
          console.log(data)
          if (data && data.code === 0) {
            this.tableData = []
            this.tableData.push(data.stockInfo)
            this.total = 1
          }
        })
      }
      this.getStockInfoList()
    },
    // 更新库存量
    updateInventory() {
      return this.$http({
        url: this.$http.adornUrl('/mall/stockinfo/update'),
        method: 'post',
        data: this.editOrderForm,
      }).then(({ data }) => {
        console.log(data)
        if (data && data.code === 0) {
          this.$message.success('更新成功')
          this.editDialogVisible = false
        }
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getStockInfoList()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss'>
.repetory-list {
  width: 100%;
  position: relative;
  .search-box {
    margin: 20px 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-input {
      width: 300px;
    }
  }
  .table-box {
    h3 {
      font-size: 14px;
    }
  }
}
</style>
